<template>
  <page-header-wrapper :title="false">
    <a-card :loading="loading">
      <div slot="title"><a-icon type="user" /> 客户详情</div>
      <a-row :gutter="[20, 20]">
        <a-col :span="12">
          <a-card title="客户基本资料">
            <a-spin :spinning="baseLoading">
              <a-form-model
                ref="form"
                :model="baseInfoForm"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
              >
                <a-row :gutter="10">
                  <a-col :span="12">
                    <a-form-model-item label="客户姓名">
                      <a-input v-model="baseInfoForm.customer_name" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="注册号">
                      <a-input v-model="baseInfoForm.registration_no" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="商标分类">
                      <a-input v-model="baseInfoForm.tm_category" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="商标名称">
                      <a-input v-model="baseInfoForm.tm_name" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="联系电话1">
                      <a-input disabled v-model="baseInfoForm.phone" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="联系电话2">
                      <a-input v-model="baseInfoForm.phone2" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="申请主体">
                      <a-input v-model="baseInfoForm.apply" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="法人">
                      <a-input placeholder="输入法人" v-model="baseInfoForm.legal_person" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="客户微信">
                      <a-input placeholder="输入客户微信号" v-model="baseInfoForm.wechat" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="注册地址" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                      <a-input v-model="baseInfoForm.register_address" placeholder="客户地址" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-textarea rows="4" placeholder="输入备注信息" v-model="baseInfoForm.notes2"></a-textarea>
                  </a-col>
                </a-row>
              </a-form-model>
            </a-spin>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card>
            <s-table
              bordered
              ref="table"
              size="middle"
              :row-key="(record) => record.cb_id"
              :columns="businessColumns"
              :data="businessData"
            >
              <template slot="business_name" slot-scope="text,record">
                <div>{{text}}</div>
                <div>{{record.open_time}}</div>
              </template>
              <template slot="price" slot-scope="text,record">
                <div><a-tag color="red">打款金额：{{text}}</a-tag></div>
                <div><a-tag color="red">官费：{{record.official_fee}}</a-tag></div>
                <div><a-tag color="red">代理费：{{record.agency_fee}}</a-tag></div>
              </template>
              <template slot="status2_name" slot-scope="text">
                <a-tag color="red">{{text}}</a-tag>
              </template>
              <template slot="action" slot-scope="text, record">
                <a-button type="link" @click="$router.push({ name: 'BusinessDetail', params: { id: record.cb_id } })">查看</a-button>
              </template>
            </s-table>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getCustomerBusiness, getCustomerDetail } from '@/api/customer'
import col from '@/columns/customer'

export default {
  components: {
    STable
  },
  name: 'OtherDetail',
  data () {
    return {
      queryParam: {},
      visible: false,
      loading: false,
      customerId: '',
      baseLoading: false,
      baseInfoForm: {},
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
      statusOpt: {},
      businessColumns: col.business,
      businessData: parameters => {
        return getCustomerBusiness(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      }
    }
  },
  activated () {
    this.init()
  },
  created () {
    this.customerId = this.$route.params.id
    this.queryParam['filter[customer_id]'] = this.customerId
  },
  methods: {
    init () {
      this.customerId = this.$route.params.id
      this.queryParam['filter[customer_id]'] = this.customerId
      this.getDetail(this.$route.params.id)
      this.$refs.table.refresh(true)
    },
    getDetail (id) {
      const app = this
      app.baseLoading = true
      getCustomerDetail(id).then(res => {
        if (res.status === 0) {
          app.baseInfoForm = res.result.customer
          app.baseLoading = false
        } else {
          app.$warning({
            title: res.msg,
            onOk: () => {
              app.$router.go(-1)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
